<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/functions" %>
<%--
  Created by IntelliJ IDEA.
  User: Jim
  Date: 2021/6/4
  Time: 20:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/attendance.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>Title</title>
</head>
<body>
<table id="customers">
    <c:forEach var="attend" items="${attendances}">
        <tr>
            <c:choose>
                <c:when test="${attend.status == 'OK'}">
                    <td>正常</td>
                </c:when>
                <c:when test="${attend.status == 'NO'}">
                    <td>未修</td>
                </c:when>
                <c:otherwise>
                    <td>${attend.status}</td>
                </c:otherwise>
            </c:choose>
            <td>${attend.sequence}</td>
            <td>${attend.name}</td>
            <c:forEach begin="0" end="${f:length(attend.marks)-1}" var="i">
                <td>${attend.marks[i]}</td>
            </c:forEach>
        </tr>
    </c:forEach>
</table>
<div id="container">
    <div id="box">
        <div id="btnList">
            <button id="close" class="btn">关闭</button>
            <button id="add1" class="btn btn1">+1</button>
            <button id="add2" class="btn btn1">+2</button>
            <button id="add3" class="btn btn1">+5</button>
            <button id="mns" class="btn btn1">-2</button>
        </div>
        <div id="stu-num" style="font:normal bold 2.5rem/1.25rem SimSun-ExtB;color: red;"></div>
        <br>
        <div id="stu-name" style="font:normal bold 2.5rem/1.25rem SimSun-ExtB;color: red;"></div>
        <div id="btnList2">
            <button id="lastOne" class="btn btn2">上一个</button>
            <button id="nextOne" class="btn btn2">下一个</button>
            <button id="randomOne" class="btn btn2">随机选中</button>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var box = document.getElementById('box');
    var lastCow = null;
    var cow =  null;
    $(document).ready(function(){
        $("tr").click(function(){
            if($(this).find("td").eq(0).text()!="状态") {
                if (lastCow) lastCow.removeClass("msg-font");
                box.style.display = 'flex';
                cow = $(this);
                cow.addClass("msg-font");
                var data = cow.find("td");
                $("#stu-num").text(data.eq(1).text());
                $("#stu-name").text(data.eq(2).text());
                lastCow = cow;
            }
        });
        $("#close").click(function() {
            box.style.display = 'none';
            // 关闭后恢复box到原来的默认位置
            box.style.top = '200px';
            box.style.left = '';
            if(cow)cow.removeClass("msg-font");
        });
        $(".btn1").click(function () {
            if (cow) {
                var present_score = $(this).text();
                var td_length = cow.find("td").length;
                var data2 = cow.find("td");
                var score = parseInt(data2.eq(td_length - 1).text()) + parseInt(present_score);
                var sequence = data2.eq(1).text();
                data2.eq(td_length - 1).text(score.toString());
            $.ajax({
                type:"POST",
                dataType:"json",
                url:"/Attendance/updateScore",
                data:{score:score.toString(),sequence:sequence},//分数、学号
                success:function (result) {

                }
                });

        }
        });
        $(".btn2").click(function () {
            var cowNum = null;
            var thisId = $(this).attr('id').toString();
            if(cow)cowNum = cow.index();//获取当前行号
            if(thisId == "lastOne"&&cowNum>1){
                lastCow=cow;
                cow=$("table").find("tr").eq(cowNum-1);
                cow.addClass("msg-font");
                lastCow.removeClass("msg-font");
            }
            else if(thisId == "nextOne"&&cowNum<$("table").find("tr").length-1){
                lastCow=cow;
                cow=$("table").find("tr").eq(cowNum+1);
                cow.addClass("msg-font");
                lastCow.removeClass("msg-font");
            }
            else if(thisId == "randomOne"){
                var maxNum = $("table").find("tr").length-1;
                var randomNum = parseInt(Math.random()*maxNum,10)+1;
                if(randomNum!=cowNum){
                    lastCow=cow;
                    cow=$("table").find("tr").eq(randomNum);
                    cow.addClass("msg-font");
                    lastCow.removeClass("msg-font");
                }
            }
            $("#stu-num").text(cow.find("td").eq(1).text());
            $("#stu-name").text(cow.find("td").eq(2).text());
        })
    });
</script>
</html>
